<template>
	<view class="">
		<view class="body">
			<view class="search_top">
				<u-search :show-action="false" bg-color="#130f26" placeholder="" v-model="keyword"></u-search>
			</view>
			<view style="margin-left: 14.88rpx;">
				<u-tabs
					@click="clickTabs"
					lineColor="#46a6f8"
					:activeStyle="{
						color: '#FFFFFF',
					}"
					:inactiveStyle="{
						color: '#8A92A3',
					}"
					keyName="title"
					:list="list"
					:is-scroll="false"
					:current="current"
				></u-tabs>
			</view>
			<view  v-if="noticeList.length == 0">
					<image style="
					width: 280rpx;
					height: 280rpx;
					margin: 295rpx 230rpx 0;
					" src="../../static/images/fighting.gif" mode=""></image>
			</view>
			<view class="tit_box" v-else v-for="(item,index) in noticeList" :key="index" @click='goDetails(item)'>
				<view class="tit_img">
					<image class="tit_img" :src="imgUrl+item.coverUrl"></image>
				</view>
			</view>
		</view>
      <u-loadmore v-if="noticeList.length == 0"  bg-color="#1c213a" mode="circle" color="#ccc" :status="loadStatus" @loadmore="onReachBottom"></u-loadmore>
	</view>
</template>

<script>
	import config from "@/config.js"
	import {
		getNoticeType,
		getNotice
	} from '@/api/work/goinfo';
	export default {
		comments: {

		},
		created() {
			this.getNoticeType();
			this.clickTabs('全部')
		},
		data() {
			return {
				keyword: '',
				list: [{
					title: '全部'
				}],
				current: 0,
				name: '',
				noticeList: [],
				imgUrl: config.gillUrl,
				loadStatus:'loadmore',
				totalSize:0,
				type:'',
				page:{
					currentPage:0,//当前页
					size: 50, //每页条数
					totalPage: 0, //总数
				},
				onReachBottom:()=>{
					if(this.noticeList.length>=this.totalSize){
						this.loadStatus = 'nomore';
						return;
					}
					// console.log(this.noticeList);
					this.page.currentPage++; // 更新页码
					this.loadStatus = 'loading'; // 显示加载状态
					getNotice(this.type,this.page)
						.then((res) => {
							this.totalSize=res.data.totalElements
							// console.log(this.name);
							// 假设返回的新数据在 res.data.pageData 中
							const newItems = res.data.content;
							
							this.noticeList = this.noticeList.concat(newItems); // 将新数据添加到列表
					
							if (this.noticeList.length >= this.totalSize) {
								this.loadStatus = 'nomore'; // 如果已加载完所有数据，更新加载状态为 "nomore"
							} else {
								this.loadStatus = 'loadmore'; // 否则继续显示加载更多状态
							}
						})
						.catch((error) => {
							// 处理加载错误
							console.error('Error loading more data:', error);
							this.loadStatus = 'fail'; // 如果加载失败，更新加载状态为 "fail"
						});
				}
				
		}	
			
		},
		methods: {
			async getNoticeType() {
				const res = await getNoticeType()
				this.list = [{
					id: "",
					title: "全部"
				}, ...res.data]
			},
			goDetails(item) {
				uni.setStorageSync("CAROUSEL_CONTENT",item)
				uni.navigateTo({
					url: "/pages/goInfo/details"
				})
			},
			async clickTabs(item) {
				this.type=item.id
				this.noticeList=[]
				this.page.currentPage=0
				this.loadStatus = 'loadmore'
				const res = await getNotice(item.id,this.page)
				this.totalSize=res.data.totalElements
				this.noticeList = res.data.content
			}
		},
	}

</script>

<style lang="scss" scoped>
::v-deep .u-search__content{
	border-radius: 9rpx !important;
}
.body {
	.search_top {
		padding: 17rpx 34rpx;
	}

		.tit_box {
			margin: 34rpx;
			.tit_img {
				width: 680rpx;
				height: 394rpx;
				// box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 23rpx;
				opacity: 1;
			}

			.tit {
				width: 680rpx;
				height: 100rpx;
				background: #15142d;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 0rpx 0rpx 17rpx 17rpx;
				.tit_top {
					width: 650rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					display: block;
					padding: 20rpx;
					text-align: center;
					height: 25rpx !important;
					font-size: 28rpx;
					font-family:"font"; 
					font-weight: 800;
					color: #ffffff !important;
					line-height: 25rpx;
					z-index: 999;
				}

			.tit_btm {
				/* padding: 20rpx; */
				text-align: center;
				height: 31rpx;
				font-size: 23rpx;
				font-family:"font"; 
				font-weight: 400;
				color: #8a92a3;
				line-height: 31rpx;
				text-shadow: 0px 7px 17px rgba(0, 0, 0, 0.302);
			}
		}
	}
}
</style>
